<template>
  <div>
    <!-- <div class="bg-[url('assets/images/bg5.jpg')] bg-cover bg-center h-screen text-white p-3 flex overflow-hiddens"
      v-if="data">
      
    </div> -->
    <div id="threeBackground"></div>
    <div class="left flex-1 mr-3 bg-opacity-50 bg-slate-800 p-3">
      <!-- 横向柱状图 -->
      <HorizontalBar ref="horizontalBar" class="h-1/3 box-border pb-2" :data="data.regionData" />
      <!-- 雷达图 -->
      <RadarBar class="h-1/3 box-border pb-2" :data="data.riskData" />
      <!-- 关系图 -->
      <Relation class="h-1/3" :data="data.relationData" />
    </div>
    

  </div>
</template>

<script setup>
import HorizontalBar from "./components/HorizontalBar.vue";
import RadarBar from "./components/RadarBar.vue";
import Relation from "./components/Relation.vue";
import TotalData from "./components/TotalData.vue";
import MapChart from "./components/MapChart.vue";
import VerticalBar from "./components/VerticalBar.vue";
import RingBar from "./components/RingBar.vue";
import WordCloud from "./components/WordCloud.vue";

import { reactive, ref, onMounted } from "vue";
import { getVisualization } from './api/visualization';

import three3D from './utils/threeEarth';
// 本地mock数据
import mockData from "./utils/mockData";
let _mockData = reactive(mockData);

const horizontalBar = ref();

const data = ref(null);
const loadData = async () => {
  // data.value = await getVisualization()
  data.value = _mockData;
};
loadData();
console.log(data, "数据")

setInterval(() => {
  loadData();
}, 3000);

onMounted(() => {
  console.log(horizontalBar.value, 'horizontalBar.value')
  const containerDom = document.querySelector('#threeBackground');
  three3D(containerDom, horizontalBar.value.myChart);
});
</script>

<style scoped>
#threeBackground {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.left {
  position: fixed;
  top: 0;
  left: 0;
}

.right {
  position: fixed;
  top: 0;
  right: 0;
}
</style>
